<template><div><h2 id="表单字段的使用" tabindex="-1"><a class="header-anchor" href="#表单字段的使用"><span>表单字段的使用</span></a></h2>
<p>在<code v-pre>model-form</code>中内置了大量的form组件来帮助你快速的构建form表单</p>
<h2 id="公共方法" tabindex="-1"><a class="header-anchor" href="#公共方法"><span>公共方法</span></a></h2>
<h3 id="设置表单值-value" tabindex="-1"><a class="header-anchor" href="#设置表单值-value"><span>设置表单值 (value)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'text...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置默认值-default" tabindex="-1"><a class="header-anchor" href="#设置默认值-default"><span>设置默认值 (default)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">default</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'text...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>此方法仅在<strong>新增页面</strong>有效，如果<strong>编辑页面</strong>也需要设置默认值，可以参考以下方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'xxx'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">default</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'默认值'</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置自定义class-addelementclass" tabindex="-1"><a class="header-anchor" href="#设置自定义class-addelementclass"><span>设置自定义class (addElementClass)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 如果不希望添加前缀，则第二个参数设置为false</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">addElementClass</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'class1'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'class2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置提示信息-help" tabindex="-1"><a class="header-anchor" href="#设置提示信息-help"><span>设置提示信息 (help)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">help</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'help...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置属性-attribute" tabindex="-1"><a class="header-anchor" href="#设置属性-attribute"><span>设置属性 (attribute)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'data-title'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'title...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'data-title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'title...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置为必填-required" tabindex="-1"><a class="header-anchor" href="#设置为必填-required"><span>设置为必填 (required)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 不显示"*"号</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">required</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="设置为不可编辑-disable" tabindex="-1"><a class="header-anchor" href="#设置为不可编辑-disable"><span>设置为不可编辑 (disable)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置占位符-placeholder" tabindex="-1"><a class="header-anchor" href="#设置占位符-placeholder"><span>设置占位符 (placeholder)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">placeholder</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'请输入。。。'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置宽度-width" tabindex="-1"><a class="header-anchor" href="#设置宽度-width"><span>设置宽度 (width)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="设置验证规则-rules" tabindex="-1"><a class="header-anchor" href="#设置验证规则-rules"><span>设置验证规则 (rules)</span></a></h3>
<p>具体使用可参考<a href="https://learnku.com/docs/dcat-admin/1.x/form-validation/8112" target="_blank" rel="noopener noreferrer">表单验证</a>。</p>
<h3 id="修改待保存的表单输入值-saving" tabindex="-1"><a class="header-anchor" href="#修改待保存的表单输入值-saving"><span>修改待保存的表单输入值 (saving)</span></a></h3>
<p>通过<code v-pre>saving</code>方法可以更改待保存数据的格式。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Helper</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleFile</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'files'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$paths</span> <span class="token operator">=</span> <span class="token class-name static-context">Helper</span><span class="token operator">::</span><span class="token function">array</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 获取数据库当前行的其他字段</span></span>
<span class="line">    <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">username</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 最终转化为json保存到数据库</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="修改表单数据显示-customformat" tabindex="-1"><a class="header-anchor" href="#修改表单数据显示-customformat"><span>修改表单数据显示 (customFormat)</span></a></h3>
<p>通过<code v-pre>customFormat</code>方法可以改变从外部注入到表单的字段值。</p>
<p>如下例子中，<code v-pre>multipleFile</code>字段要求待渲染的字段值为数组格式，我们可以通过<code v-pre>customFormat</code>方法把从数据库查出的字段值转化为<code v-pre>array</code>格式</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Helper</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleFile</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'files'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$paths</span> <span class="token operator">=</span> <span class="token class-name static-context">Helper</span><span class="token operator">::</span><span class="token function">array</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 获取数据库当前行的其他字段</span></span>
<span class="line">    <span class="token variable">$username</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">username</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 转为数组</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">Helper</span><span class="token operator">::</span><span class="token function">array</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在弹窗中隐藏" tabindex="-1"><a class="header-anchor" href="#在弹窗中隐藏"><span>在弹窗中隐藏</span></a></h3>
<p>如果不想在弹窗中显示某个字段，可以使用<code v-pre>Form\Field::hideInDialog</code>方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">textare</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'contents'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">hideInDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="文本-text" tabindex="-1"><a class="header-anchor" href="#文本-text"><span>文本 (text)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 添加提交验证规则</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required|min:10'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="隐藏字段-hidden" tabindex="-1"><a class="header-anchor" href="#隐藏字段-hidden"><span>隐藏字段 (hidden)</span></a></h2>
<p>通过<code v-pre>hidden</code>方法可以给你的表单设置一个隐藏字段。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">hidden</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'author_id'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">user</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>通常可以结合<code v-pre>saving</code>事件使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">hidden</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'author_id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token property">author_id</span> <span class="token operator">=</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">user</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="下拉选框单选-select" tabindex="-1"><a class="header-anchor" href="#下拉选框单选-select"><span>下拉选框单选 (select)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'val'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Option name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>或者从api中获取选项列表：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/api/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 使用ajax并显示所选项目</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Model</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/api/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或指定名称和ID</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Model</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/api/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其中api接口的格式必须为下面格式：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">[</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">21</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果选项过多，可通过ajax方式动态分页载入选项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user_id'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$user</span> <span class="token operator">=</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token variable">$user</span><span class="token operator">-></span><span class="token property">id</span> <span class="token operator">=></span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">name</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'api/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>API <code v-pre>/admin/api/users</code>接口的代码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">users</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$q</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'q'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'like'</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"%<span class="token interpolation"><span class="token variable">$q</span></span>%"</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">paginate</span><span class="token punctuation">(</span><span class="token constant">null</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name as text'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接口返回的数据结构为</p>
<div class="language-json line-numbers-mode" data-highlighter="prismjs" data-ext="json" data-title="json"><pre v-pre class="language-json"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token property">"total"</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"per_page"</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"current_page"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"last_page"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"next_page_url"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"prev_page_url"</span><span class="token operator">:</span> <span class="token null keyword">null</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"from"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"to"</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">48</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token property">"text"</span><span class="token operator">:</span> <span class="token string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="下拉选框联动-load" tabindex="-1"><a class="header-anchor" href="#下拉选框联动-load"><span>下拉选框联动 (load)</span></a></h2>
<p><code v-pre>select</code>组件支持父子关系的单向联动：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'province'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">load</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'city'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'/api/city'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'city'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其中<code v-pre>load('city', '/api/city');</code>的意思是，在当前select的选项切换之后，会把当前选项的值通过参数<code v-pre>q</code>, 调用接口<code v-pre>/api/city</code>，并把api返回的数据填充为city选择框的选项，其中api<code v-pre>/api/city</code>返回的数据格式必须符合:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">[</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">21</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>控制器action的代码示例如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">city</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$provinceId</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'q'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">ChinaArea</span><span class="token operator">::</span><span class="token function">city</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'parent_id'</span><span class="token punctuation">,</span> <span class="token variable">$provinceId</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token class-name static-context">DB</span><span class="token operator">::</span><span class="token function">raw</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name as text'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>selectTable</code>、<code v-pre>multipleSelectTable</code>、<code v-pre>radio</code>、<code v-pre>checkbox</code>也可以使用<code v-pre>load</code>方法联动<code v-pre>select</code>和<code v-pre>multipleSelect</code>表单，用法和上面的示例一致。</p>
<h3 id="联动多个字段-loads" tabindex="-1"><a class="header-anchor" href="#联动多个字段-loads"><span>联动多个字段 (loads)</span></a></h3>
<p>使用<code v-pre>loads</code>方法可以联动多个字段，用法如下</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'status'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">loads</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'field1'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'field2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'/api/field1'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'/api/field2'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'field1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'field2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>api</code>返回的数据格式与<code v-pre>load</code>方法一致，<code v-pre>selectTable</code>、<code v-pre>multipleSelectTable</code>、<code v-pre>radio</code>、<code v-pre>checkbox</code>也可以使用<code v-pre>loads</code>方法联动。</p>
<h2 id="下拉选框多选-multipleselect" tabindex="-1"><a class="header-anchor" href="#下拉选框多选-multipleselect"><span>下拉选框多选 (multipleSelect)</span></a></h2>
<blockquote>
<p>注入这个字段的数据（从数据库查出来的）可以是一个以<code v-pre>,</code>隔开的字符串，也可以是<code v-pre>json</code>字符串或<code v-pre>array</code>数组。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSelect</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'val'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Option name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 转化成json字符串保存到数据库</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 使用ajax并显示所选项目：</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSelect</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Model</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ajax_url'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或指定名称和ID</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSelect</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Model</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ajax_url'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>多选框可以处理两种情况，第一种是<code v-pre>ManyToMany</code>的关系。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Post</span> <span class="token keyword">extends</span> <span class="token class-name">Models</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">tags</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">belongsToMany</span><span class="token punctuation">(</span><span class="token class-name static-context">Tag</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">return</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token class-name static-context">Post</span><span class="token operator">::</span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSelect</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Tag</span><span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span> <span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 从数据库中查出的二维数组中转化成ID</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token function">array_column</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>第二种是将选项数组存储到单字段中，如果字段是字符串类型，那就需要在模型里面为该字段定义<a href="https://learnku.com/docs/laravel/5.5/eloquent-mutators" target="_blank" rel="noopener noreferrer">访问器和修改器</a>来存储和读取了。</p>
<p>如果选项过多，可通过ajax方式动态分页载入选项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleSelect</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'friends'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$ids</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$ids</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'api/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>API <code v-pre>/admin/api/users</code>接口的代码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">users</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$q</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'q'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'like'</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"%<span class="token interpolation"><span class="token variable">$q</span></span>%"</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">paginate</span><span class="token punctuation">(</span><span class="token constant">null</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name as text'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接口返回的数据结构为</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token string double-quoted-string">"total"</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"per_page"</span><span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"current_page"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"last_page"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"next_page_url"</span><span class="token punctuation">:</span> <span class="token constant">null</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"prev_page_url"</span><span class="token punctuation">:</span> <span class="token constant">null</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"from"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"to"</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">21</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表格选择器-selecttable" tabindex="-1"><a class="header-anchor" href="#表格选择器-selecttable"><span>表格选择器 (selectTable)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Renderable<span class="token punctuation">\</span>UserTable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Administrator</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">selectTable</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'弹窗标题'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">dialogWidth</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'50%'</span><span class="token punctuation">)</span> <span class="token comment">// 弹窗宽度，默认 800px</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">from</span><span class="token punctuation">(</span><span class="token class-name static-context">UserTable</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span> <span class="token operator">=></span> <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 设置渲染类实例，并传递自定义参数</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token class-name static-context">Administrator</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置编辑数据显示</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 上面的代码等同于</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">selectTable</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">from</span><span class="token punctuation">(</span><span class="token class-name static-context">UserTable</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span> <span class="token operator">=></span> <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 设置渲染类实例，并传递自定义参数</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 设置编辑数据显示</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span> <span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Administrator</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>定义渲染类如下，需要继承<code v-pre>Dcat\Admin\Grid\LazyRenderable</code></p>
<blockquote>
<p>这里使用了数据表格异步加载功能，详细用法请参考<a href="https://learnku.com/docs/dcat-admin/2.x/asynchronous-loading/9327" target="_blank" rel="noopener noreferrer">异步加载</a></p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Renderable</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid<span class="token punctuation">\</span>LazyRenderable</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Administrator</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserTable</span> <span class="token keyword">extends</span> <span class="token class-name">LazyRenderable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">Grid</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 获取外部传递的参数</span></span>
<span class="line">        <span class="token variable">$id</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">id</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Administrator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'updated_at'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">quickSearch</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'username'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">paginate</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">disableActions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Filter</span> <span class="token variable">$filter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$filter</span><span class="token operator">-></span><span class="token function">like</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'username'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$filter</span><span class="token operator">-></span><span class="token function">like</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">width</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/1221772c-22cb-4857-aac6-0c9b5dca764a-P5hZXiqAj9.gif" alt=""></p>
<h3 id="设置选中后将保存到表单的字段和显示的字段" tabindex="-1"><a class="header-anchor" href="#设置选中后将保存到表单的字段和显示的字段"><span>设置选中后将保存到表单的字段和显示的字段</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">selectTable</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">from</span><span class="token punctuation">(</span><span class="token class-name static-context">UserTable</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span> <span class="token operator">=></span> <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 设置编辑数据显示</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span> <span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Administrator</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 第一个参数为显示的字段，第二个参数为选中后将保存到表单的字段</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 上面的代码也可以简化为</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">selectTable</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">from</span><span class="token punctuation">(</span><span class="token class-name static-context">UserTable</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span> <span class="token operator">=></span> <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">model</span><span class="token punctuation">(</span><span class="token class-name static-context">Administrator</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置编辑数据显示</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="多选盒-listbox" tabindex="-1"><a class="header-anchor" href="#多选盒-listbox"><span>多选盒 (listbox)</span></a></h2>
<p>使用方法和<code v-pre>multipleSelect</code>类似。</p>
<blockquote>
<p>注入这个字段的数据（从数据库查出来的）可以是一个以<code v-pre>,</code>隔开的字符串，也可以是<code v-pre>json</code>字符串或<code v-pre>array</code>数组。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">listbox</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'val'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Option name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="长文本-textarea" tabindex="-1"><a class="header-anchor" href="#长文本-textarea"><span>长文本 (textarea)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">textarea</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rows</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="单选-radio" tabindex="-1"><a class="header-anchor" href="#单选-radio"><span>单选 (radio)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'m'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Female'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'f'</span><span class="token operator">=></span> <span class="token string single-quoted-string">'Male'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">default</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'m'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="多选-checkbox" tabindex="-1"><a class="header-anchor" href="#多选-checkbox"><span>多选 (checkbox)</span></a></h2>
<p><code v-pre>options()</code>方法用来设置选择项:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">checkbox</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">,</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'val'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Option name'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 转化成json字符串保存到数据库</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>启用选中全部功能</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">checkbox</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'column'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">canCheckAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="autocomplete" tabindex="-1"><a class="header-anchor" href="#autocomplete"><span>autocomplete</span></a></h2>
<p>此表单可以在填写表单时进行对表单值进行搜索，并把结果展示在下拉列表中，用法如下</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'foo'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置分组名称</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">groups</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'label'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'group name'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string single-quoted-string">'options'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'foo'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'bar'</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果如下<br>
<img src="@source/dcat-admin-2x/assets/images/fc04af27-a8c6-4e37-bb0b-023b79e0a8ce-ArVNSvChag.png" alt=""></p>
<h3 id="从远程api获取数据" tabindex="-1"><a class="header-anchor" href="#从远程api获取数据"><span>从远程API获取数据</span></a></h3>
<p>也可以从远程API中获取数据</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// ajax 函数的第一个参数为 ajax url, 第二个参数为 valueField（可选）, 第三个参数为 groupField（可选）</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/countries'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'region'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>远程API 服务端的请求参数为query，示例代码如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">CountryController</span> <span class="token keyword">extends</span> <span class="token class-name">AdminController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">search</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$countries</span> <span class="token operator">=</span> <span class="token class-name static-context">Country</span><span class="token operator">::</span><span class="token function">when</span><span class="token punctuation">(</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'query'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$query</span><span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'like'</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"%<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$value</span><span class="token punctuation">}</span></span>%"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token variable">$countries</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="自定义-autocomplete-的设置" tabindex="-1"><a class="header-anchor" href="#自定义-autocomplete-的设置"><span>自定义 autocomplete 的设置：</span></a></h3>
<p>详细设置请参考： <a href="https://github.com/devbridge/jQuery-Autocomplete" target="_blank" rel="noopener noreferrer">devbridge/jQuery-Autocomplete</a></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$js</span> <span class="token operator">=</span> <span class="token string heredoc-string"><span class="token delimiter symbol"><span class="token punctuation">&lt;&lt;&lt;</span>JS</span></span>
<span class="line">    function (suggestion) {</span>
<span class="line">        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);</span>
<span class="line">    }</span>
<span class="line"><span class="token delimiter symbol">JS<span class="token punctuation">;</span></span></span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">configs</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'minChars'</span> <span class="token operator">=></span> <span class="token number">5</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'noCache'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'onSelect'</span> <span class="token operator">=></span> <span class="token class-name static-context">JavaScript</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$js</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>configs 同样也支持闭包：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">configs</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token variable">$model</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token operator">...</span><span class="token operator">.</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="表单联动" tabindex="-1"><a class="header-anchor" href="#表单联动"><span>表单联动</span></a></h3>
<p>autocomplete 的联动逻辑和select的刚好相反。<br>
depends 需要写在受影响的字段，不限上级字段类型，上级字段的值将同时上传到API。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'region'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'asia'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'Africa'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'America'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'Europe'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'country'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/countries'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'region'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 将会发出 /states?query={query}&amp;region={region}&amp;country={country}  的请求</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">autocomplete</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'addr'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/states'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">depends</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'region'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'country'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="邮箱-email" tabindex="-1"><a class="header-anchor" href="#邮箱-email"><span>邮箱 (email)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">email</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="密码-password" tabindex="-1"><a class="header-anchor" href="#密码-password"><span>密码 (password)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">password</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="链接-url" tabindex="-1"><a class="header-anchor" href="#链接-url"><span>链接 (url)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="ip地址-ip" tabindex="-1"><a class="header-anchor" href="#ip地址-ip"><span>IP地址 (ip)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">ip</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="手机-mobile" tabindex="-1"><a class="header-anchor" href="#手机-mobile"><span>手机 (mobile)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'mask'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'999 9999 9999'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="颜色选择器-color" tabindex="-1"><a class="header-anchor" href="#颜色选择器-color"><span>颜色选择器 (color)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">color</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="时间-time" tabindex="-1"><a class="header-anchor" href="#时间-time"><span>时间 (time)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">time</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置时间格式，更多格式参考http://momentjs.com/docs/#/displaying/format/</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">time</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="日期-date" tabindex="-1"><a class="header-anchor" href="#日期-date"><span>日期 (date)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">date</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置日期格式，更多格式参考http://momentjs.com/docs/#/displaying/format/</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">date</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'YYYY-MM-DD'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="时间日期-datetime" tabindex="-1"><a class="header-anchor" href="#时间日期-datetime"><span>时间日期 (datetime)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">datetime</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置日期格式，更多格式参考http://momentjs.com/docs/#/displaying/format/</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">datetime</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'YYYY-MM-DD HH:mm:ss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="时间范围-timerange" tabindex="-1"><a class="header-anchor" href="#时间范围-timerange"><span>时间范围 (timeRange)</span></a></h2>
<p><code v-pre>$startTime</code>、<code v-pre>$endTime</code>为开始和结束时间字段:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">timeRange</span><span class="token punctuation">(</span><span class="token variable">$startTime</span><span class="token punctuation">,</span> <span class="token variable">$endTime</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Time Range'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="日期范围-daterange" tabindex="-1"><a class="header-anchor" href="#日期范围-daterange"><span>日期范围 (dateRange)</span></a></h2>
<p><code v-pre>$startDate</code>、<code v-pre>$endDate</code>为开始和结束日期字段:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">dateRange</span><span class="token punctuation">(</span><span class="token variable">$startDate</span><span class="token punctuation">,</span> <span class="token variable">$endDate</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Date Range'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="时间日期范围-datetimerange" tabindex="-1"><a class="header-anchor" href="#时间日期范围-datetimerange"><span>时间日期范围 (datetimeRange)</span></a></h2>
<p><code v-pre>$startDateTime</code>、<code v-pre>$endDateTime</code>为开始和结束时间日期:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">datetimeRange</span><span class="token punctuation">(</span><span class="token variable">$startDateTime</span><span class="token punctuation">,</span> <span class="token variable">$endDateTime</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'DateTime Range'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="范围-range" tabindex="-1"><a class="header-anchor" href="#范围-range"><span>范围 (range)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">range</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'start_column'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'end_column'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'范围'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="文件上传-file" tabindex="-1"><a class="header-anchor" href="#文件上传-file"><span>文件上传 (file)</span></a></h2>
<p>使用文件上传功能之前需要先完成上传配置。文件上传配置以及内置方法请参考:<a href="https://learnku.com/docs/dcat-admin/1.x/picture-file-upload/8106" target="_blank" rel="noopener noreferrer">图片/文件上传</a>.</p>
<blockquote>
<p>文件或图片上传表单字段请不要在模型中设置<strong>访问器</strong>和<strong>修改器</strong>拼接域名，如有相关需求可参考<a href="https://learnku.com/docs/dcat-admin/1.x/picture-file-upload/8106#withhost" target="_blank" rel="noopener noreferrer">文件/图片域名拼接</a>。</p>
</blockquote>
<p>文件上传目录在文件<code v-pre>config/admin.php</code>中的<code v-pre>upload.file</code>中配置，如果目录不存在，需要创建该目录并开放写权限。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 修改文件上传路径和文件名</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">move</span><span class="token punctuation">(</span><span class="token variable">$dir</span><span class="token punctuation">,</span> <span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 并设置上传文件类型</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'mimes:doc,docx,xlsx'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 添加文件删除按钮</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">file</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">removable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="图片上传-image" tabindex="-1"><a class="header-anchor" href="#图片上传-image"><span>图片上传 (image)</span></a></h2>
<p>使用图片上传功能之前需要先完成上传配置，图片上传配置以及内置方法请参考:<a href="https://learnku.com/docs/dcat-admin/1.x/picture-file-upload/8106" target="_blank" rel="noopener noreferrer">图片/文件上传</a>。</p>
<blockquote>
<p>文件或图片上传表单字段请不要在模型中设置<strong>访问器</strong>和<strong>修改器</strong>拼接域名，如有相关需求可参考<a href="https://learnku.com/docs/dcat-admin/1.x/picture-file-upload/8106#withhost" target="_blank" rel="noopener noreferrer">文件/图片域名拼接</a>。</p>
</blockquote>
<p>图片上传目录在文件<code v-pre>config/admin.php</code>中的<code v-pre>upload.image</code>中配置，如果目录不存在，需要创建该目录并开放写权限。</p>
<p>可以使用压缩、裁切、添加水印等各种方法,需要先安装<a href="http://image.intervention.io/getting_started/installation" target="_blank" rel="noopener noreferrer">intervention/image</a>。更多使用方法请参考[<a href="http://image.intervention.io/getting_started/introduction" target="_blank" rel="noopener noreferrer">Intervention</a>]：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 修改图片上传路径和文件名</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">move</span><span class="token punctuation">(</span><span class="token variable">$dir</span><span class="token punctuation">,</span> <span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 剪裁图片</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">crop</span><span class="token punctuation">(</span><span class="token keyword type-hint">int</span> <span class="token variable">$width</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$height</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token keyword type-declaration">int</span> <span class="token variable">$x</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$y</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 加水印</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">image</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">insert</span><span class="token punctuation">(</span><span class="token variable">$watermark</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'center'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="多图和多文件上传-multipleimage" tabindex="-1"><a class="header-anchor" href="#多图和多文件上传-multipleimage"><span>多图和多文件上传 (multipleImage)</span></a></h2>
<p>使用图片上传功能之前需要先完成上传配置，图片上传配置以及内置方法请参考:<a href="https://learnku.com/docs/dcat-admin/1.x/picture-file-upload/8106" target="_blank" rel="noopener noreferrer">图片/文件上传</a>。</p>
<blockquote>
<p>注入这个字段的数据（从数据库查出来的）可以是一个以<code v-pre>,</code>隔开的字符串，也可以是<code v-pre>json</code>字符串或<code v-pre>array</code>数组。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 多图</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleImage</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 限制最大上传数量</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleImage</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 多文件</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleFile</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 限制最大上传数量</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleFile</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">limit</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>多图/文件上传的时候提交的数据是一个<code v-pre>array</code>数组，你可以通过以下方式把数据在保存进数据库之前改为你想要的格式：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 转化为json格式保存到数据库</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleFile</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 可以转化为由 , 隔开的字符串格式</span></span>
<span class="line">    <span class="token comment">// return implode(',', $paths);</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 也可以转化为json</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然，如果你想保存为其他任意格式都是可以的，只是如果要保存其他格式，需要通过用<code v-pre>customFormat</code>方法把数据转化为一维数组展示，如：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleFile</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'images'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">collect</span><span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token function">explode</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'|'</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">flatten</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$paths</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">implode</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'|'</span><span class="token punctuation">,</span> <span class="token variable">$paths</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>启用可排序功能</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">multipleImage</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'images'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="富文本编辑器-editor" tabindex="-1"><a class="header-anchor" href="#富文本编辑器-editor"><span>富文本编辑器 (editor)</span></a></h2>
<p>系统集成了<code v-pre>TinyMCE</code>编辑器作为内置编辑器。</p>
<h4 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用"><span>基本使用</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="设置语言包" tabindex="-1"><a class="header-anchor" href="#设置语言包"><span>设置语言包</span></a></h4>
<p>默认支持简体中文和英文两种语言，如需其他语言可以通过以下方式设置语言包地址。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">languageUrl</span><span class="token punctuation">(</span><span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'TinyMCE/langs/de.js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="编辑器配置" tabindex="-1"><a class="header-anchor" href="#编辑器配置"><span>编辑器配置</span></a></h4>
<p>具体配置等的使用可以参考<a href="https://www.tiny.cloud/docs" target="_blank" rel="noopener noreferrer">官方文档</a>或<a href="http://tinymce.ax-z.cn/" target="_blank" rel="noopener noreferrer">中文文档</a></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>JavaScript</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'toolbar'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'setup'</span> <span class="token operator">=></span> <span class="token class-name static-context">JavaScript</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token punctuation">(</span>editor<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'编辑器初始化成功'</span><span class="token punctuation">,</span> editor<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置高度" tabindex="-1"><a class="header-anchor" href="#设置高度"><span>设置高度</span></a></h4>
<p>默认值为<code v-pre>400</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'600'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="只读" tabindex="-1"><a class="header-anchor" href="#只读"><span>只读</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">readOnly</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="图片上传" tabindex="-1"><a class="header-anchor" href="#图片上传"><span>图片上传</span></a></h4>
<p>设置图片上传<code v-pre>disk</code>配置，默认上传到<code v-pre>admin.upload.disk</code>指定的配置</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 上传到oss</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'oss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>设置图片上传目录，默认为<code v-pre>tinymce/images</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">imageDirectory</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'editor/images'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>自定义上传接口，接口返回格式需要是<code v-pre>{&quot;location&quot;: &quot;图片url&quot;}</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">editor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">imageUrl</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'editor/upload-image'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="全局设置" tabindex="-1"><a class="header-anchor" href="#全局设置"><span>全局设置</span></a></h4>
<p>如果你需要对编辑器进行全局设置，可以在<code v-pre>app\Admin\bootstrap.php</code>加上以下代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form<span class="token punctuation">\</span>Field<span class="token punctuation">\</span>Editor</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Editor</span><span class="token operator">::</span><span class="token function">resolving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Editor</span> <span class="token variable">$editor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 设置默认配置</span></span>
<span class="line">    <span class="token variable">$editor</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 设置编辑器图片默认上传到七牛云</span></span>
<span class="line">    <span class="token variable">$editor</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'qiniu'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="markdown编辑器-markdown" tabindex="-1"><a class="header-anchor" href="#markdown编辑器-markdown"><span>Markdown编辑器 (markdown)</span></a></h2>
<p>系统集成了<code v-pre>editor-md</code>编辑器作为内置Markdown编辑器。</p>
<h4 id="基本使用-1" tabindex="-1"><a class="header-anchor" href="#基本使用-1"><span>基本使用</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="设置语言包-1" tabindex="-1"><a class="header-anchor" href="#设置语言包-1"><span>设置语言包</span></a></h4>
<p>默认支持简体中文和英文两种语言，如需其他语言可以通过以下方式设置语言包地址。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">languageUrl</span><span class="token punctuation">(</span><span class="token function">admin_asset</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@admin/dcat/plugins/editor-md/languages/zh-tw.js'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="编辑器配置-1" tabindex="-1"><a class="header-anchor" href="#编辑器配置-1"><span>编辑器配置</span></a></h4>
<p>具体配置等的使用可以参考<a href="https://pandao.github.io/editor.md/" target="_blank" rel="noopener noreferrer">官方文档</a></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>JavaScript</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'onpreviewing'</span> <span class="token operator">=></span> <span class="token class-name static-context">JavaScript</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// console.log("onpreviewing =>", this, this.id, this.settings);</span></span>
<span class="line">    <span class="token comment">// on previewing you can custom css .editormd-preview-active</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="设置高度-1" tabindex="-1"><a class="header-anchor" href="#设置高度-1"><span>设置高度</span></a></h4>
<p>默认值为<code v-pre>500</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">height</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'600'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="只读-1" tabindex="-1"><a class="header-anchor" href="#只读-1"><span>只读</span></a></h4>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">readOnly</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="图片上传-1" tabindex="-1"><a class="header-anchor" href="#图片上传-1"><span>图片上传</span></a></h4>
<p>设置图片上传<code v-pre>disk</code>配置，默认上传到<code v-pre>admin.upload.disk</code>指定的配置</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 上传到oss</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'oss'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>设置图片上传目录，默认为<code v-pre>markdown/images</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">imageDirectory</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'markdown/images'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>自定义上传接口，接口返回格式需要是<code v-pre>{&quot;success&quot;: 1, &quot;url&quot;: &quot;图片url&quot;}</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">markdown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'content'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">imageUrl</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'markdown/upload-image'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="全局设置-1" tabindex="-1"><a class="header-anchor" href="#全局设置-1"><span>全局设置</span></a></h4>
<p>如果你需要对编辑器进行全局设置，可以在<code v-pre>app\Admin\bootstrap.php</code>加上以下代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Form<span class="token punctuation">\</span>Field<span class="token punctuation">\</span>Markdown</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Markdown</span><span class="token operator">::</span><span class="token function">resolving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Markdown</span> <span class="token variable">$markdown</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 设置默认配置</span></span>
<span class="line">    <span class="token variable">$markdown</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 设置编辑器图片默认上传到七牛云</span></span>
<span class="line">    <span class="token variable">$markdown</span><span class="token operator">-></span><span class="token function">disk</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'qiniu'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="开关-switch" tabindex="-1"><a class="header-anchor" href="#开关-switch"><span>开关 (switch)</span></a></h2>
<p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>开关表单保存到数据库的默认值为<code v-pre>1</code>和<code v-pre>0</code>，如果需要更改保存到数据库的值，可以这样使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">==</span> <span class="token string single-quoted-string">'打开'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'打开'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'关闭'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="地图-map" tabindex="-1"><a class="header-anchor" href="#地图-map"><span>地图 (map)</span></a></h2>
<p>地图控件，用来选择经纬度,<code v-pre>$latitude</code>, <code v-pre>$longitude</code>为经纬度字段。</p>
<p>使用这个功能需要在 <code v-pre>config/admin.php</code> 文件中修改 <code v-pre>map_provider</code> 的值（目前支持的地图为：”tencent”,”amap”, “google”, “yandex”, “baidu”)，不同地图需要自己申请相应的 KEY 并在 .env 文件中配置，然后需要在<code v-pre>app/Admin/bootstrap.php</code>中加入以下代码</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name class-name-fully-qualified static-context">Form<span class="token punctuation">\</span>Field<span class="token punctuation">\</span>Map</span><span class="token operator">::</span><span class="token function">requireAssets</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">map</span><span class="token punctuation">(</span><span class="token variable">$latitude</span><span class="token punctuation">,</span> <span class="token variable">$longitude</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="滑动条-slider" tabindex="-1"><a class="header-anchor" href="#滑动条-slider"><span>滑动条 (slider)</span></a></h2>
<p>可以用来数字类型字段的选择，比如年龄：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">slider</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'max'</span> <span class="token operator">=></span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'min'</span> <span class="token operator">=></span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'step'</span> <span class="token operator">=></span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'postfix'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'years old'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>更多options请参考:<a href="https://github.com/IonDen/ion.rangeSlider#settings" target="_blank" rel="noopener noreferrer">github.com/IonDen/ion.rangeSlider#...</a></p>
<h2 id="仅显示-display" tabindex="-1"><a class="header-anchor" href="#仅显示-display"><span>仅显示 (display)</span></a></h2>
<p>只显示字段，不做任何操作：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token comment">//更复杂的显示</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string double-quoted-string">"&lt;img src="</span><span class="token variable">$value</span><span class="token string double-quoted-string">" />"</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="单位符号-currency" tabindex="-1"><a class="header-anchor" href="#单位符号-currency"><span>单位符号 (currency)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">currency</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置单位符号</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">currency</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">symbol</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'￥'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="数字-number" tabindex="-1"><a class="header-anchor" href="#数字-number"><span>数字 (number)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">number</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="费率-rate" tabindex="-1"><a class="header-anchor" href="#费率-rate"><span>费率 (rate)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">rate</span><span class="token punctuation">(</span><span class="token variable">$column</span><span class="token punctuation">[</span><span class="token punctuation">,</span> <span class="token variable">$label</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="分割线-divider" tabindex="-1"><a class="header-anchor" href="#分割线-divider"><span>分割线 (divider)</span></a></h2>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="自定义内容-html" tabindex="-1"><a class="header-anchor" href="#自定义内容-html"><span>自定义内容 (html)</span></a></h2>
<p>插入html内容，参数可以是实现了<code v-pre>Htmlable</code>、<code v-pre>Renderable</code>或者实现了<code v-pre>__toString()</code>方法的类</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'你的html内容'</span><span class="token punctuation">,</span> <span class="token variable">$label</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="标签-tags" tabindex="-1"><a class="header-anchor" href="#标签-tags"><span>标签 (tags)</span></a></h2>
<p>插入逗号(,)隔开的字符串<code v-pre>tags</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'keywords'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>tags</code>同样支持<code v-pre>ManyToMany</code>的关系，示例如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'文章标签'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span> <span class="token comment">// name 为需要显示的 Tag 模型的字段，id 为主键</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Tag</span><span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 下拉框选项</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意：处理<code v-pre>ManyToMany</code>关系时必须调用<code v-pre>pluck</code>方法，指定显示的字段名和主键。<br>
此外 <code v-pre>options</code> 方法传入一个<code v-pre>Collection</code>对象时，<code v-pre>options</code>会自动调用该对象的<code v-pre>pluck</code>方法转为<code v-pre>['主键名' =&gt; '显示字段名']</code> 数组，作为下拉框选项。或者可以直接使用<code v-pre>['主键名' =&gt; '显示字段名']</code>这样的数组作为参数。</p>
<p><code v-pre>tags</code>还支持<code v-pre>saving</code>方法用于处理提交的数据，示例如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'文章标签'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token class-name static-context">Tag</span><span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$value</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>saving</code> 方法接收一个「参数为 tags 的提交值，返回值为修改后的 tags 提交值」的闭包，可以用于实现自动创建新 tag 或其它功能。</p>
<p>如果选项过多，可通过ajax方式动态分页载入选项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tags</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'friends'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$ids</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword type-casting">array</span><span class="token punctuation">)</span> <span class="token variable">$ids</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">pluck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'api/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>API <code v-pre>/admin/api/users</code>接口的代码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">users</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$q</span> <span class="token operator">=</span> <span class="token variable">$request</span><span class="token operator">-></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'q'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'like'</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"%<span class="token interpolation"><span class="token variable">$q</span></span>%"</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">paginate</span><span class="token punctuation">(</span><span class="token constant">null</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'name as text'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接口返回的数据结构为</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token string double-quoted-string">"total"</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"per_page"</span><span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"current_page"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"last_page"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"next_page_url"</span><span class="token punctuation">:</span> <span class="token constant">null</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"prev_page_url"</span><span class="token punctuation">:</span> <span class="token constant">null</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"from"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"to"</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string double-quoted-string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">21</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string double-quoted-string">"id"</span><span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string double-quoted-string">"text"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"xxx"</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="图标选择器-icon" tabindex="-1"><a class="header-anchor" href="#图标选择器-icon"><span>图标选择器 (icon)</span></a></h2>
<p>选择<code v-pre>font-awesome</code>图标</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">icon</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'icon'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="树形选择器-tree" tabindex="-1"><a class="header-anchor" href="#树形选择器-tree"><span>树形选择器 (tree)</span></a></h2>
<p>树形结构表单</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'permissions'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token class-name static-context">Model</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 设置所有节点</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 格式化外部注入的值</span></span>
<span class="line">        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">array_column</span><span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 修改节点的字段名称</span></span>
<span class="line"><span class="token comment">// 默认 “id” “name” “parent_id”</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'permissions'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token variable">$permissionModel</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">setIdColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">setTitleColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">setParentColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'parent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span>
<span class="line"></span>
<span class="line"><span class="token comment">// 默认是不保存父节点的值的，因为一般来说父节点只是作为标题的形式存在</span></span>
<span class="line"><span class="token comment">// 禁止过滤父节点的值</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'permissions'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token variable">$permissionModel</span><span class="token operator">-></span><span class="token function">allNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">exceptParentNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 默认收缩子节点</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'permissions'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token variable">$permissionModel</span><span class="token operator">-></span><span class="token function">allNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">expand</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>tree</code>表单默认不允许单独选中父节点，可以通过<code v-pre>treeState(false)</code>开启这个功能</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'xxx'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">treeState</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span> <span class="token comment"># 允许单独选择父节点</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">setTitleColumn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">nodes</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/21e95146-b96a-4d19-95c9-2eb318ae4802-oChwzky2BT.gif" alt=""></p>
<h2 id="表格表单-table" tabindex="-1"><a class="header-anchor" href="#表格表单-table"><span>表格表单 (table)</span></a></h2>
<p>如果某一个字段存储的是json格式的二维数组，可以使用table表单组件来实现快速的编辑：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">table</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">NestedForm</span> <span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'desc'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>同时在模型里面给这个字段增加访问器和修改器:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getExtraAttribute</span><span class="token punctuation">(</span><span class="token variable">$extra</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">array_values</span><span class="token punctuation">(</span><span class="token function">json_decode</span><span class="token punctuation">(</span><span class="token variable">$extra</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span> <span class="token operator">?</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">setExtraAttribute</span><span class="token punctuation">(</span><span class="token variable">$extra</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">attributes</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'extra'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token function">array_values</span><span class="token punctuation">(</span><span class="token variable">$extra</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这个组件类似于hasMany组件，不过是用来处理单个字段的情况，适用于简单的二维数据。</p>
<h2 id="一对多-hasmany" tabindex="-1"><a class="header-anchor" href="#一对多-hasmany"><span>一对多 (hasMany)</span></a></h2>
<p>一对多内嵌表格，用于处理一对多的关系，下面是个简单的例子：</p>
<p>有两张表是一对多关系：</p>
<div class="language-sql line-numbers-mode" data-highlighter="prismjs" data-ext="sql" data-title="sql"><pre v-pre class="language-sql"><code><span class="line"><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token identifier"><span class="token punctuation">`</span>demo_painters<span class="token punctuation">`</span></span> <span class="token punctuation">(</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>username<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>bio<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>created_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>updated_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token keyword">ENGINE</span><span class="token operator">=</span><span class="token keyword">InnoDB</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CHARSET</span><span class="token operator">=</span>utf8 <span class="token keyword">COLLATE</span><span class="token operator">=</span>utf8_unicode_ci<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token identifier"><span class="token punctuation">`</span>demo_paintings<span class="token punctuation">`</span></span> <span class="token punctuation">(</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>painter_id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>title<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>body<span class="token punctuation">`</span></span> <span class="token keyword">text</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>completed_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>created_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>updated_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0000-00-00 00:00:00'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token keyword">KEY</span> painter_id <span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">`</span>painter_id<span class="token punctuation">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token keyword">ENGINE</span><span class="token operator">=</span><span class="token keyword">InnoDB</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CHARSET</span><span class="token operator">=</span>utf8 <span class="token keyword">COLLATE</span><span class="token operator">=</span>utf8_unicode_ci<span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>表的模型为：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Demo</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Painter</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">paintings</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">hasMany</span><span class="token punctuation">(</span><span class="token class-name static-context">Painting</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'painter_id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Demo</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Painting</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$fillable</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'body'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'completed_at'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">painter</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">belongsTo</span><span class="token punctuation">(</span><span class="token class-name static-context">Painter</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'painter_id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>构建表单代码如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Demo<span class="token punctuation">\</span>Painter</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 这里需要显式地指定关联关系</span></span>
<span class="line"><span class="token variable">$builder</span> <span class="token operator">=</span> <span class="token class-name static-context">Painter</span><span class="token operator">::</span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'paintings'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 如果你使用的是数据仓库，则可以这样指定关联关系</span></span>
<span class="line"><span class="token comment">// $repository = new Painter(['paintings']);</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">return</span> <span class="token class-name static-context">Form</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$builder</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Form</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'username'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">textarea</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'bio'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">hasMany</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'paintings'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>NestedForm</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">textarea</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">datetime</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'completed_at'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'created_at'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Created At'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">display</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'updated_at'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Updated At'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 也可以设置label</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">hasMany</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'paintings'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'画作'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>NestedForm</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token operator">...</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/67e1169e-db3e-4418-9e8b-261f5878ec5f-MejvctX1V7.png" alt=""></p>
<h3 id="表格模式-table" tabindex="-1"><a class="header-anchor" href="#表格模式-table"><span>表格模式 (table)</span></a></h3>
<p>如果你想要显示表格模式，可以这样使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Helper</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">hasMany</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'paintings'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Form<span class="token punctuation">\</span>NestedForm</span> <span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">     <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">useTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/279e582d-3865-4a2c-bfb6-767a462e5136-d12nXkSUMM.png" alt=""></p>
<h2 id="内嵌-embeds" tabindex="-1"><a class="header-anchor" href="#内嵌-embeds"><span>内嵌 (embeds)</span></a></h2>
<blockquote>
<p>内嵌表单不支持图片和文件上传表单。</p>
</blockquote>
<p>用于处理<code v-pre>mysql</code>的<code v-pre>JSON</code>类型字段数据或者<code v-pre>mongodb</code>的<code v-pre>object</code>类型数据，也可以将多个field的数据值以<code v-pre>JSON</code>字符串的形式存储在<code v-pre>mysql</code>的字符串类型字段中</p>
<p>比如<code v-pre>orders</code>表中的<code v-pre>JSON</code>或字符串类型的<code v-pre>extra</code>字段，用来存储多个field的数据，先定义model:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Order</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$casts</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'extra'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'json'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在form中使用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">embeds</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra1'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">email</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra2'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra3'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">datetime</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra4'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$form</span><span class="token operator">-></span><span class="token function">dateRange</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra5'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'extra6'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'范围'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">rules</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 自定义标题</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">embeds</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'extra'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'附加信息'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$form</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>回调函数里面构建表单元素的方法调用和外面是一样的。</p>
</div></template>


